<template>
  <div class="topic-wrap" :style="{backgroundColor:body.backgroundColor}">
    <!-- <script src="http://www.zxxk.com/service/js/header.js" type="text/javascript" charset="utf-8"></script> -->
    <!--banner-->
    <div
      class="banner"
      :style="{backgroundImage:'url('+imgPrefix+banner.backgroundImage+')',height:banner.height}"
    >
      <div class="center">
        <!--静态图片-->
        <div class="frame frame-10">
          <img :src="imgPrefix+banner.center" alt />
        </div>
        <!--主图，可加任意https://daneden.github.io/animate.css/中的动效class-->
        <div class="frame frame-20">
          <img :src="imgPrefix+banner.main.image" :class="['animated',banner.main.animation]" alt />
        </div>
      </div>
    </div>
    <!--楼层-->
    <div class="floor" v-for="(floor,index) in floors" :key="index">
      <div class="unvisible">
        <img :src="imgPrefix+floor.center" alt />
      </div>
      <!--背景图层-->
      <div
        class="frame frame-10"
        :style="{backgroundImage:floor.backgroundImage?'url('+imgPrefix+floor.backgroundImage+')':'none',backgroundRepeat:floor.backgroundRepeat||'none'}"
      ></div>
      <!--内容图层-->
      <div class="frame frame-20">
        <div class="floor-full-wrap">
          <div class="floor-center-content">
            <img :src="imgPrefix+floor.center" alt />
            <div class="virtual-link-wrap" v-if="floor.link" :style="floor.link.style">
              <!--虚拟链接-->
              <!--文字类型-->
              <template v-if="floor.link.type==='text'">
                <a
                  class="virtual-link"
                  v-for="(item,index) in floor.link.list"
                  :key="index"
                  :href="item.href"
                  :style="[{width:1/floor.link.list.length*100+'%',backgroundImage:'url(about:blank)'},item.style]"
                >{{item.text}}</a>
              </template>
              <!--图片类型-->
              <template v-if="floor.link.type==='image'">
                <a
                  class="virtual-link"
                  v-for="(item,index) in floor.link.list"
                  :key="index"
                  :href="item.href"
                  :class="floor.link.hoverAnimationClass"
                  :style="[{width:1/floor.link.list.length*100+'%'},item.style]"
                >
                  <img :src="item.src" alt />
                </a>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--底部-->
    <div
      class="footer"
      :style="[footer.style,{backgroundImage:footer.backgroundImage?'url('+imgPrefix+footer.backgroundImage+')':'none'}]"
    >
      <div class="footer-content" v-if="footer.content">
        <div class="friend-links">
          <a
            v-for="(link,index) in footer.content.friendLinks"
            :key="index"
            :href="link.href"
            :style="link.style"
          >{{link.name}}</a>
        </div>
        <div class="copyright" v-if="footer.content.copyright">{{footer.content.copyright}}</div>
        <div class="beian" v-if="footer.content.beian">{{footer.content.beian}}</div>
      </div>
    </div>
  </div>
</template>

<script>
const imgPrefix = '/img/'
export default {
  components: {},
  data: () => {
    return {}
  },
  computed: {
    banner() {
      return this.body.banner
    },
    floors() {
      return this.body.floors
    },
    footer() {
      return this.body.footer
    }
  },
  asyncData(ctx) {
    return ctx.$axios.get('/subject-config.json').then(({ data }) => {
      data.imgPrefix = imgPrefix
      return data
    })
  },
  //SSR渲染头部
  head() {
    return {
      title: this.title,
      link: [
        {
          rel: 'canonical',
          href: `http://www.zxxk.com/soft/topic.html`
        }
      ],
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.title
        },
        {
          hid: 'keywords',
          name: 'keywords',
          content: this.title
        }
      ]
    }
  },
  mounted() {
    this.queryJson()

    this.location = window.location.href
  },
  methods: {
    async queryJson() {
      // let { data } = await this.$axios.get('/subject-config.json')
      console.log(this)
    }
  }
}
</script>

<style lang="scss">
@import '~/assets/css/animate.scss';
@import '~/assets/css/hoverAnimation.scss';
a {
  text-decoration: none;
  &:hover{
    text-decoration: underline;
  }
}
img {
  border: 0;
}
.banner {
  background-position: center top;
  overflow: hidden;
}
.floor {
  position: relative;
}
.unvisible {
  visibility: hidden;
  img {
    display: block;
  }
}
.center {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.floor-full-wrap {
  text-align: center;
}
.floor-center-content {
  display: inline-block;
  position: relative;
}
.frame {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.frame-10 {
  z-index: 10;
}
.frame-20 {
  z-index: 20;
}
.frame-30 {
  z-index: 30;
}
.floor .center img {
  display: block;
  margin: 0 auto;
}
.virtual-link-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.virtual-link {
  height: 100%;
  display: inline-block;
  background-image: url('about:blank');
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}
.footer {
  background-position: center bottom;
  background-repeat: no-repeat;
}
.virtual-link {
  img {
    width: 100%;
  }
}
@media (min-width: 1920px) {
  .banner {
    background-size: 100% 100%;
  }
  .footer {
    background-size: 100% 100%;
  }
}
</style>
